<template>
  <div class="toper">
    <div class="shuliang" v-for="item in icons">
      <div class="family">
        <img :src="item.icon" alt="" />
      </div>
      <div class="all_number">
        <div class="number">
          <div class="shu">
            {{ item.value }}<span class="danwei">{{ item.unit }}</span>
          </div>
        </div>
        <div class="zong">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import {recordHomePage} from 'network/day'

export default {
  data() {
    return {
      icons: [],
    };
  },
  created() {
    this.recordHomePage()
  },
  mounted() {},

  methods: {
    async recordHomePage() {
      let result = await recordHomePage()
      console.log(result.result);
      this.icons = [
        {
          icon: require("assets/img/day/04-1.png"),
          name: "总户数",
          value: result.result.registerNum,
          unit: "户",
        },
        {
          icon: require("assets/img/day/04-2.png"),
          name: "人员总数量",
          value: result.result.peopleNum,
          unit: "人",
        },
        {
          icon: require("assets/img/day/04-3.png"),
          name: "房屋总数量",
          value: result.result.houseNum,
          unit: "户",
        },
        {
          icon: require("assets/img/day/04-4.png"),
          name: "企业总数量",
          value: result.result.companyNum,
          unit: "个",
        },
        {
          icon: require("assets/img/day/04-5.png"),
          name: "耕地总面积",
          value: result.result.landAreaNum,
          unit: "个",
        },
      ]
    }
  },
};
</script>

<style lang="scss" scoped>
.toper {
  width: 100%;
  height: 8.5625rem;
  display: flex;
  justify-content: space-around;
  .shuliang {
    margin-top: 1.875rem;
    width: 13.8125rem;
    height: 8.5625rem;
    display: flex;
    align-items: center;
    .family {
      width: 6.8125rem;
      height: 8.5625rem;
      display: flex;
      align-items: center;
      img {
        width: 6.125rem;
        height: 5.75rem;
      }
    }
    .all_number {
      .number {
        height: 2.25rem;
        position: relative;
        text-align: left;
        .shu {
          font-size: 2.1875rem;
          font-family: shuzi, serif;
          color: rgb(0, 228, 255);
          white-space: nowrap;
          .danwei {
            font-size: 0.75rem;
            color: rgb(0, 228, 255);
          }
        }
      }
      .zong {
        font-size: 0.975rem;
        line-height: 2.125rem;
        color: #fff;
        text-align: left;
        letter-spacing: 0.125rem;
      }
    }
  }
}
</style>